import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { Location } from '@nutui/icons-react-taro'
import { View, Text, Icon } from '@tarojs/components'
import QQMapWX from 'qqmap-wx-jssdk';
import './index.scss'

function CitySelector({ onCityChange }) {
  const [city, setCity] = useState('加载中...'); // 初始状态
  const [loading, setLoading] = useState(true); // 加载状态
  const [error, setError] = useState(null); // 错误状态
  useEffect(() => {

    const qqmapsdk = new QQMapWX({
      key: '6W5BZ-FVW3V-4BHP3-UVLHP-SISP7-MPBVG' // 替换为你的腾讯地图 Key
    });

    Taro.getSetting({
      success: (res) => {
        if (!res.authSetting['scope.userLocation']) {
          Taro.authorize({ scope: 'scope.userLocation' })
            .then(() => {
              getCurrentLocation();
            })
            .catch((err) => {
              setError('未授权获取位置信息');
              setLoading(false);
            });
        } else {
          getCurrentLocation();
        }
      },
      fail: () => {
        setError('获取设置失败');
        setLoading(false);
      }
    });
    const getCurrentLocation = () => {
      Taro.getLocation({
        type: 'gcj02', // 推荐使用 gcj02 坐标系，更适合国内地图
        success: (res) => {
          const { latitude, longitude } = res;
          // 使用腾讯地图 SDK 进行逆地理编码
          qqmapsdk.reverseGeocoder({
            location: {
              latitude: latitude,
              longitude: longitude
            },
            success: (addressRes) => {
              // 从返回结果中提取城市信息
              const cityName = addressRes.result.address_component.city || '北京';
              const pureCityName = cityName.replace(/市$/, '');
              setCity(pureCityName);
              setLoading(false);
              if (onCityChange) {
                onCityChange(pureCityName);
              }
            },
            fail: (err) => {
              console.error('腾讯地图逆地理编码失败:', err);
              setError('获取城市信息失败');
              setLoading(false);
            }
          });
        },
        fail: (err) => {
          console.error('获取位置失败:', err);
          setError('获取位置失败');
          setLoading(false);
        }
      });
    };
  }, []);

  return (
    <View className='city-selector-container'>
      <View className='city-title'>城市（自动获取）</View>
      <View className={`city-value ${loading ? 'loading' : ''} ${error ? 'error' : ''}`}>
        <Location size="30rpx"/>
        {loading ? (
          <Text>正在获取...</Text>
        ) : error ? (
          <Text>{error}</Text>
        ) : (
          <Text>{city}</Text>
        )}
      </View>
    </View>
  )
}

export default CitySelector